<template>
  <div class="lineItem">
    <div class="lineItem_info">
      <div class="flow clearfix">
          <ul>
            <li><span></span><p>等待同意</p></li>
            <li><span></span><p>等待开工</p></li>
            <li><span></span><p>正在干活</p></li>
            <li><span></span><p>等待验收</p></li>
            <li><span></span><p>等待付款</p></li>
            <li><span></span><p>已完成</p></li>
          </ul>
      </div>
      <ul>
          <li>
              <span>雇主信息</span>
              <strong class="phone">{{ datas.employerInfo_name }} <i>{{ datas.employerInfo_phone }}</i></strong>
          </li>
          <li class="address">
              <span>雇主地址</span>
              <strong><i class="iconfont icon-dingwei"></i>{{ datas.employerInfo_add }}</strong>
          </li>
          <li>
              <span>干活时间</span>
              <strong>{{ datas.work_time }}</strong>
          </li>
          <li>
              <span>留言</span>
              <strong>{{ datas.leave_msg }}</strong>
          </li>
      </ul>
    </div>
    <div class="firm_info">
        <h4 class="title_h4">{{ datas.title }}</h4>
        <div class="content_text clearfix">
          <img src="../assets/images/zanwei.png" alt="">
          <div class="contentText_right">
            <h4>{{ datas.contentText_text }}</h4>
            <div class="univalence clearfix">
              <div class="univalence_left clearfix">
                金额：<span>{{ datas.univalence_number }}元/天</span>
              </div>
              <span class="univalence_amount">x{{ datas.univalence_amount }}</span>
            </div>
          </div>
        </div>
    </div>
    <div class="lineItem_time">
      <ul>
        <li>
          <span>创建时间</span>
          <strong>{{ datas.creation_time }}</strong>
        </li>
        <li>
          <span>订单号</span>
          <strong>{{ datas.order_number }}</strong>
        </li>
      </ul>
    </div>
    <div class="download clearfix">
        <span>{{ datas.Download }}</span><a @click="download" href="javascript:void(0);">立即下载</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'lineItem',
  data () {
      return {
          datas:{
              employerInfo_name: '张老板',
              employerInfo_phone: '15901515270',
              employerInfo_add: '北京市丰台区东营里5号红狮家园4区5楼2门',
              work_time: '8月28日  11:00-17:00',
              leave_msg: '请及时电话沟通',
              creation_time: '2017年12月14日（14:00)',
              order_number: 14518548545456,
              title: '北京天天美尚股份有限公司',
              title_btn: '等待开工',
              contentText_text:'高端家政服务',
              univalence_number:45,
              univalence_amount:2,
              Download: '下载打零工APP查看并管理更多订单信息'
          }
      }
  },
  methods:{
    download(){
        this.$router.push({path:'/download'})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .phone i{color:#5cbcff;}
  .lineItem_time{margin-top: .6rem;background: #fff;font-size: 1rem;padding:.2rem 1rem;}
  .lineItem_time ul li{padding:1rem 0;}
  .lineItem_time li,.lineItem_info li{padding:.5rem 0;border-bottom:1px solid #f2f2f2;}
  .lineItem_time li:last-child{border-bottom:0;}
  .lineItem_time span,.lineItem_info li span{color:#999;display: inline-block;width:23%;text-align: right;padding-right: 2%;height:100%;line-height: 100%;}
  .lineItem_time strong,.lineItem_info li strong{font-weight: 400;width:73%;display: inline-block;}
  .lineItem_info{}
  .flow{background: #fff;border-bottom:1px solid #f2f2f2;}
  .lineItem_info .flow li{border:0;width:16.6%;float: left;font-size: .8rem;text-align: center;color:#999;padding:2rem 0 2rem 0;}
  .lineItem_info .flow li span{height:.3rem;padding:1.2rem 0 .5rem 0;display: inline-block;width:100%;text-align: center;background: url("../assets/images/flow_08.png") no-repeat;background-size: 100%;}
  .lineItem_info .flow li:first-child span{background: url("../assets/images/flow_02.png") no-repeat;background-size: 100%;}
  .lineItem_info .flow li:last-child span{background: url("../assets/images/flow_09.png") no-repeat;background-size: 100%;}/*
  .lineItem_info .current li span{background: url("../assets/images/flow_03.png") no-repeat;background-size: 100%;}!*点击效果*!
  .lineItem_info .current li:first-child span{background: url("../assets/images/flow_01.png") no-repeat;background-size: 100%;}
  .lineItem_info .current li:last-child span{background: url("../assets/images/flow_10.png") no-repeat;background-size: 100%;}*/
  .lineItem_info li,.flow li{padding:1rem 0;position:relative;}
  .lineItem_info li:first-child{border:0;padding-bottom: 0;}
  .lineItem_info li.address strong{width:65%;color:#ffa200;padding-left:31%;}
  .lineItem_info li.address strong i{position:absolute;top:14px;left:26%;}
  .lineItem_info li.address span{position:absolute;top:50%;left:0%;margin-top:-5px;height:auto;}
  .firm_info{padding:0 1rem;margin-top: .6rem;background: #fff;position:relative;}
  .title_h4{line-height: 3.2rem;font-size:.9rem;border-bottom:1px solid #f2f2f2;}
  .content_text{padding:1rem 0;border-bottom:1px solid #f2f2f2;font-size:.8rem;}
  .content_text img{width:35%;height:40%;display: inline-block;margin:0 3% 1% 0;float: left;}
  .contentText_right{width:58%;position:absolute;top:50%;right:1rem;margin-top: 5px;}
  .contentText_right h4{font-size:.9rem;}
  .univalence{padding-top: 1%;}
  .univalence_left{float:left;overflow: hidden;}
  .univalence_left span{color:red;}
  .univalence_amount{float:right;width:12%;color:#999;display: inline-block;text-align: right;}
  .lineItem_info{background: #fff;}
  .download{padding:1.5rem 1rem;font-size: .9rem;background: #fff;margin-top: .6rem;position:relative;}
  .download span{display: block;width:69%;float: left;color:#ffa200;}
  .download a{display:block;width:27%;text-align: center;color:#fff;background: #ffa200;border-radius: 16px;line-height:2.2rem;position: absolute;top:50%;right:1rem;margin-top: -1.1rem;}
</style>
